<template>
  <div>
    <div class="top" @click="$router.push('/edit')">
      <img
        v-if="userInfo.head_img"
        class="userImg"
        :src="this.$axios.defaults.baseURL + userInfo.head_img"
        alt
      />
      <!-- <img v-else-if="!userInfo.head_img" class="userImg" src="../../assets/w1.gif" alt /> -->
      <img class="userImg" v-else src="../../assets/w1.gif" alt />
      <div class="info">
        <span
          class="iconfont"
          :class="{
            iconxingbienv: userInfo.gender == 0,
            iconxingbienan: userInfo.gender == 1,
          }"
        ></span>
        {{ userInfo.nickname }}
        <div v-if="userInfo.create_date" class="date">
          {{ userInfo.create_date.split("T")[0] }}
        </div>
      </div>
      <div class="iconfont iconjiantou1"></div>
    </div>
    <!--3 渲染子组件 -->
    <PersonalCell
      label="我的关注"
      desc="关注的用户"
      @clickJump="$router.push('/follows')"
    />
    <PersonalCell
      label="我的跟帖"
      desc="跟帖/回复"
      @clickJump="$router.push('/comment')"
    />
    <PersonalCell
      label="我的收藏"
      desc="文章/视频"
      @clickJump="$router.push('/collect')"
    />
    <PersonalCell label="设置" @clickJump="$router.push('/edit')" />
    <PersonalCell label="退出" @clickJump="logOut" />
  </div>
</template>

<script>
// 1导入子组件
import PersonalCell from "../../components/PersonalCell";
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  //2 注册子组件
  components: {
    PersonalCell,
  },
  // 挂载渲染个人信息
  mounted() {
    // 发送请求
    this.$axios({
      method: "get",
      url: "/user/" + localStorage.getItem("userId"),
    })
      .then((res) => {
        // console.log(res);
        if (res.data.message === "获取成功") {
          // 获取响应数据
          // console.log("响应数据", res.data);
          // 将数据存储在本地data里
          this.userInfo = res.data.data;
          return;
        }
      })
      .catch((err) => {
        // 展开错误
        console.dir(err);
        // 提示错误
        this.$toast.fail("系统错误");
      });
  },
  methods: {
    // 处理退出登录函数
    logOut() {
      // 清空本地存储的token及id数据
      window.localStorage.clear();
      // 延时跳转
      setTimeout(() => {
        // 跳转到登录页面
        // this.$router.push("/login");
        this.$router.replace("/login");
      }, 800);
    },
  },
};
</script>

<style lang="less" scoped>
.top {
  display: flex;
  align-items: center;
  padding: 16/360 * 100vw;
  padding-right: 10/360 * 100vw;
  border-bottom: 4px solid #e4e4e4;
  .userImg {
    width: 70/360 * 100vw;
    height: 70/360 * 100vw;
    border-radius: 50%;
    object-fit: cover;
  }
  .info {
    flex: 1;
    color: #494949;
    font-size: 14/360 * 100vw;
    padding-left: 10/360 * 100vw;
    .date {
      color: #aaa4a7;
      margin-top: 4/360 * 100vw;
    }
    .iconxingbienv {
      color: #74b9eb;
    }
    .iconxingbienan {
      color: #74b9eb;
    }
  }
  .iconjiantou1 {
    color: #d5d5d5;
  }
}
</style>
